{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/2022/make-your-own blog-part1/",
    "result": {"data":{"site":{"siteMetadata":{"title":"blog","lang":"en"}},"markdownRemark":{"id":"9b6700f0-c8fc-50bc-b70d-90516fb875a0","excerpt":"一.新建Github Page 先新建一个, 命名为  (注意修改username为你自己的)  二.创建博客 安装脚手架 使用该模板建立你的博客 进入开发 打开  http://localhost:800…","tableOfContents":"<ul>\n<li><a href=\"#%E4%B8%80%E6%96%B0%E5%BB%BAgithub-page\">一.新建Github Page</a></li>\n<li><a href=\"#%E4%BA%8C%E5%88%9B%E5%BB%BA%E5%8D%9A%E5%AE%A2\">二.创建博客</a></li>\n<li><a href=\"#%E4%B8%89%E5%8F%91%E5%B8%83%E5%8D%9A%E5%AE%A2\">三.发布博客</a></li>\n<li><a href=\"#%E5%8F%82%E8%80%83\">参考</a></li>\n</ul>","html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 630px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d5f2779e5a84bf92e5d939ed7cc9b20e/c83bb/banner.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 75.31645569620254%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAwAF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAXfPWFlo/8QAGRABAQEBAQEAAAAAAAAAAAAAAgEDEgAE/9oACAEBAAEFAol6KQc6qq/P0tMtCLSf/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BR//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EACAQAAICAAYDAAAAAAAAAAAAAAERAAIDEhMhIjFRgZH/2gAIAQEABj8C7HyCxD8qOlkIc1OT3M0sNj1ES5//xAAcEAADAQACAwAAAAAAAAAAAAAAASERMWFxgbH/2gAIAQEAAT8hrhRROeN5Zo3VHEenQT6ID2LjIETcXR//2gAMAwEAAgADAAAAEKg//8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAEDAQE/EAdmf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAIf/aAAgBAgEBPxBSy//EAB0QAQACAgIDAAAAAAAAAAAAAAERIQBBMYFRYXH/2gAIAQEAAT8QY1Ygpp941wIIRPI+GGfe0cnnvLfMiDUzoxT4RwHbT3jsaMwK6z//2Q=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"writing blog\"\n        title=\"writing blog\"\n        src=\"/static/d5f2779e5a84bf92e5d939ed7cc9b20e/828fb/banner.jpg\"\n        srcset=\"/static/d5f2779e5a84bf92e5d939ed7cc9b20e/ff44c/banner.jpg 158w,\n/static/d5f2779e5a84bf92e5d939ed7cc9b20e/a6688/banner.jpg 315w,\n/static/d5f2779e5a84bf92e5d939ed7cc9b20e/828fb/banner.jpg 630w,\n/static/d5f2779e5a84bf92e5d939ed7cc9b20e/0ede0/banner.jpg 945w,\n/static/d5f2779e5a84bf92e5d939ed7cc9b20e/3ac88/banner.jpg 1260w,\n/static/d5f2779e5a84bf92e5d939ed7cc9b20e/c83bb/banner.jpg 4608w\"\n        sizes=\"(max-width: 630px) 100vw, 630px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h3 id=\"一新建github-page\" style=\"position:relative;\"><a href=\"#%E4%B8%80%E6%96%B0%E5%BB%BAgithub-page\" aria-label=\"一新建github page permalink\" class=\"autolink-heading before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>一.新建Github Page</h3>\n<p>先新建一个<code class=\"language-text\">repository</code>, 命名为 <code class=\"language-text\">username.github.io</code> (注意修改username为你自己的)</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 630px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/5e5f7a8fca24a0cae50af5303bee875c/c1b63/create-pro.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 58.22784810126582%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAABuElEQVQoz6WS626jMBBGef+n27bpJU2IAXPLBWObXLCBnBXOdttV82fVkT59HssazRxP1CjF+2rFeh1TliVCCNI0ZbVa8bZckhcF/xOR7Y7EImEdC2RREwvJJs1ZxilJKpF5QasNjWpptUZr8zc31gZXrUYbEzw6ns5U9Y79oaFoLpTKkTeOdO+w54FpmnDO0/cO5xzO+1vuHN7fPNw7HzziB3G9N/LMMN4I8rwgkznreEN3PDKMY+jA+4Fh+NT1eivz4cwezjePbNeRypyirAOzqt4GTtrYoJnXzNnYjvnt14L3FPlhoKi2JFkedOn9Tyh8MpyuV8ZpYhxvmv4w+tCczx/0tZtp+q7IGEtd1kz+386GVnNJJK7a0ecVg7ah6DCMDH5kut4fOzpfeh4yQbXdBY7b/YFz72iTgurxBflrQfX0SvXyjk5yvD3hzg4tcsZh+j7ype95kiJwzPIiFGyNpUkL6uc3isUr9csS+bBg9/yGliWm3rN7fObUKFxncXaWwVtLdDqdaA+KpmmYV0gpFZa8OxzQUqKyjFZKtnHMdrOhWC7Zrdc0WUYjNigh0GmCSgQmS/kNIcObHC5YkaUAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Create a new repository\"\n        title=\"Create a new repository\"\n        src=\"/static/5e5f7a8fca24a0cae50af5303bee875c/f058b/create-pro.png\"\n        srcset=\"/static/5e5f7a8fca24a0cae50af5303bee875c/c26ae/create-pro.png 158w,\n/static/5e5f7a8fca24a0cae50af5303bee875c/6bdcf/create-pro.png 315w,\n/static/5e5f7a8fca24a0cae50af5303bee875c/f058b/create-pro.png 630w,\n/static/5e5f7a8fca24a0cae50af5303bee875c/40601/create-pro.png 945w,\n/static/5e5f7a8fca24a0cae50af5303bee875c/c1b63/create-pro.png 1200w\"\n        sizes=\"(max-width: 630px) 100vw, 630px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h3 id=\"二创建博客\" style=\"position:relative;\"><a href=\"#%E4%BA%8C%E5%88%9B%E5%BB%BA%E5%8D%9A%E5%AE%A2\" aria-label=\"二创建博客 permalink\" class=\"autolink-heading before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>二.创建博客</h3>\n<p>安装<code class=\"language-text\">gatsby</code>脚手架</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> -g gatsby-cli</code></pre></div>\n<p>使用该模板建立你的<code class=\"language-text\">gatsby</code>博客</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">gatsby new my-blog https://github.com/zhalice2011/blog</code></pre></div>\n<p>进入开发</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token builtin class-name\">cd</span> my-blog\ngatsby develop</code></pre></div>\n<p>打开  <a href=\"http://localhost:8000\">http://localhost:8000</a> 查看页面, 然后本地进行博客的修改, 文章均放置在 <code class=\"language-text\">content</code>文件夹</p>\n<h3 id=\"三发布博客\" style=\"position:relative;\"><a href=\"#%E4%B8%89%E5%8F%91%E5%B8%83%E5%8D%9A%E5%AE%A2\" aria-label=\"三发布博客 permalink\" class=\"autolink-heading before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>三.发布博客</h3>\n<p>链接到远程仓库(注意修改username为你自己的)</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">git</span> remote <span class=\"token function\">add</span> origin git@github.com:username/username.github.io.git</code></pre></div>\n<p>发布</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">npm run deploy</code></pre></div>\n<p>此时可以看到你的 <code class=\"language-text\">username.github.io</code> 仓库多了一个 <code class=\"language-text\">gh-pages\n</code> 分支</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 630px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/fc246abce9cebbf10e6c904578f1d7f8/95c1f/new-branch.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 16.455696202531648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAe0lEQVQI112N2wrDMAxD8/+fOTbYtWsTO3HsFG212fVBICRxlBYWHM4TciFwExA3SFeoDXS1t0TNM66CJr/9y9cmSLl2HK9zAOsH+A0LYEC20w3Y/w590xUpL4z97oRSyB+IqxdjXTFGyFzDvapFvkY2zRmX2x1EDHsCH/p06foVYLGAAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"new-branch\"\n        title=\"new-branch\"\n        src=\"/static/fc246abce9cebbf10e6c904578f1d7f8/f058b/new-branch.png\"\n        srcset=\"/static/fc246abce9cebbf10e6c904578f1d7f8/c26ae/new-branch.png 158w,\n/static/fc246abce9cebbf10e6c904578f1d7f8/6bdcf/new-branch.png 315w,\n/static/fc246abce9cebbf10e6c904578f1d7f8/f058b/new-branch.png 630w,\n/static/fc246abce9cebbf10e6c904578f1d7f8/40601/new-branch.png 945w,\n/static/fc246abce9cebbf10e6c904578f1d7f8/78612/new-branch.png 1260w,\n/static/fc246abce9cebbf10e6c904578f1d7f8/95c1f/new-branch.png 2330w\"\n        sizes=\"(max-width: 630px) 100vw, 630px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>设置 <code class=\"language-text\">Github Pages</code> 展示的分支为 <code class=\"language-text\">gh-page</code> (如果设置成<code class=\"language-text\">master</code>会很凌乱, 因为都是打包后的文件)</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 630px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/f30448b381eb07893e809d8dab8f44d1/8201f/set-branch.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 48.10126582278481%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABmklEQVQoz22S2Y7bMAxF8/8/2L5MM9kcb4m1UYsl+xRyPJkWLYEDQyRMXF7y8NEKx9bx8+b4cXWcesekLc5HrAQkpI363nLOY4zDGXnXvuqPSXPw3iPiiTGgtcKJYJxgrKCMZVKap9JM2mB9QE+K5/2O7QfmNBNzIc2ZlCuFA3usgPeBsiy8c+vKY1T03Uj08ZWs5bJAWf9lhUP96QtdVVjHUpuusKwL12g42Z7P6cKnunFUDb9Uw8ncOZuGs22278XeGcv0akgFeDyetF1HiC81Ve013jnKlaO7cAw9H2Hkww9c8kC7DtyXgWbnlru94R5K6W3sfd5N6Tg80MrgrGCUQawjiCeFgA/Vv92vvc1h5TVujbqANM9/eAhtP3K+NtuC+vG5XYC2jjhnclkoy7dllbfCMmeay42h7VjSTEmJHBP9Uxgmj/ULNqwom/AxETL/jXfDHGfaa4N7TgRtSOIpIqiuZ+p6UlVlLKGOPU14L9ST2wgBiQu5rN9bfi3lseFFKDlvvjjZ7zQlxAecE8Q4cimUv6ier/wGpt0HZX2+1OMAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"set-branch\"\n        title=\"set-branch\"\n        src=\"/static/f30448b381eb07893e809d8dab8f44d1/f058b/set-branch.png\"\n        srcset=\"/static/f30448b381eb07893e809d8dab8f44d1/c26ae/set-branch.png 158w,\n/static/f30448b381eb07893e809d8dab8f44d1/6bdcf/set-branch.png 315w,\n/static/f30448b381eb07893e809d8dab8f44d1/f058b/set-branch.png 630w,\n/static/f30448b381eb07893e809d8dab8f44d1/40601/set-branch.png 945w,\n/static/f30448b381eb07893e809d8dab8f44d1/78612/set-branch.png 1260w,\n/static/f30448b381eb07893e809d8dab8f44d1/8201f/set-branch.png 2554w\"\n        sizes=\"(max-width: 630px) 100vw, 630px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>接下来就可以访问你的博客啦~ (注意修改username为你自己的)  <a href=\"https://zhalice2011.github.io/blog\">https://username.github.io</a></p>\n<h3 id=\"参考\" style=\"position:relative;\"><a href=\"#%E5%8F%82%E8%80%83\" aria-label=\"参考 permalink\" class=\"autolink-heading before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>参考</h3>\n<p><a href=\"https://zhalice2011.github.io/blog\">Dan Blog</a>\n<a href=\"https://antranapp.github.io/gatsby-minimal-simple-blog/\">An Tran Blog</a></p>","frontmatter":{"title":"Make Your Own Blog For Free in 2022 (Part 1)","date":"April 04, 2022","description":"get started building a static web blog with GitHub Pages.","tags":["react","gatsby","blog","GitHub Pages"],"toc":null},"fields":{"readingTime":{"text":"2 min read"},"langKey":"en"}}},"pageContext":{"slug":"/2022/make-your-own blog-part1/","previous":null,"next":{"id":"a2b955ee-494a-5a08-bbbd-4c4918fc4e8e","fields":{"slug":"/2022/make-your-own blog-part2/","langKey":"en","directoryName":"2022/make-your-own blog-part2"},"frontmatter":{"date":"April 05, 2022","title":"Configuring a custom domain for your GitHub Pages site (Part 2)","tags":["react","gatsby","blog","GitHub Pages"]}},"translationsLink":[]}},
    "staticQueryHashes": ["2841359383","3257411868"]}